import { ComponentClass } from 'react'
import { connect } from '@tarojs/redux'
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
import { SDBody } from 'sudao-ui'
import SDUtils from 'sudao-utils'
import md5 from 'blueimp-md5'

import PageProps from '../../../redux'
import { login, logout } from '../../../redux/actions'
import SDButton from '../../../comps/sd-button'

import { ACCOUNT_INFO } from '../../../redux/constants'

import './index.less'

type PageState = {}

type PageOwnProps = {}

interface LaunchLoginPage {
  props: PageProps & PageOwnProps
}

@connect(({userState}) => ({
  userState
}), (dispatch) => ({
  login(userInfo) {
    dispatch(login(userInfo))
  },
  logout() {
    dispatch(logout())
  }
}))
class LaunchLoginPage extends Component {

  config: Config = {
    backgroundColor: '#fff'
  }

  accountInfo = {
    userName: '',
    password: ''
  }

  render () {
    return (
      <SDBody sd-class='container'>
        <View className='main-title'>门店登录</View>
        <View className='main-content'>
          <View className='cell-item border-bottom_1px'>
            <Input className='input-cell' placeholder='请输入账号' placeholderClass='input-cell__placeholder' onInput={this.onUserNameInput} />
          </View>
          <View className='cell-item border-bottom_1px'>
            <Input className='input-cell' password placeholder='请输入密码' placeholderClass='input-cell__placeholder' onInput={this.onPasswordInput} />
          </View>

          <SDButton sd-class='btn-normal btn-login' onClick={this.execLogin}>登陆</SDButton>
          <SDButton type='dark' sd-class='btn-normal' onClick={this.applyEdit}>申请加入</SDButton>

        </View>
      </SDBody>
    )
  }

  onUserNameInput = e => {
    this.accountInfo.userName = e.detail.value
  }

  onPasswordInput = e => {
    this.accountInfo.password = e.detail.value
  }

  execLogin = async () => {
    let { userName, password } = this.accountInfo
    if (SDUtils.strIsEmpty(userName)) {
      SDUtils.showMsg('请输入账号')
      return
    }
    if (SDUtils.strIsEmpty(password)) {
      SDUtils.showMsg('请输入密码')
      return
    }
    // 模拟登录
    Taro.showLoading({
      title: '登陆中...',
      mask: true
    })
    password = md5(password)

    try {
      let accountInfo = await SDUtils.doLogin('/wxmini/portal/auth/login', {
        userName: userName,
        password: password
      })
      const storeInfo = await SDUtils.doGet(`/wxmini/trader/${accountInfo.traderId}`)
      accountInfo.storeInfo = storeInfo

      Taro.setStorageSync(ACCOUNT_INFO, {userName: userName, password: password})
      this.props.login(accountInfo)

      setTimeout(() => {
        Taro.reLaunch({
          url: '/pages/tabbar/home/index'
        })
        Taro.hideLoading()
      }, 1000)
    } catch (e) {
      SDUtils.showMsg(e)
    }
  }

  applyEdit = () => {
    SDUtils.jumpTo('/pages/launch/apply/edit/index')
  }
}

export default LaunchLoginPage as ComponentClass<PageOwnProps, PageState>
